<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
        class="general-card"
        :style="{ background: isDark ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)' : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)'}"
    >
      <div class="content-wrap">
        <div class="content">
          <a-statistic title="待提现￥" :value="count" :value-from="0" :precision="2" :value-style="{ color: '#0fbf60' }"
                       animation show-group-separator/>
          <div class="desc">
            <a-space>
              <a-typography-text type="secondary" class="label">累计获得收益￥:</a-typography-text>
              <a-typography-text type="danger"> {{ growth }}</a-typography-text>
            </a-space>
          </div>
        </div>
        <a-button type="outline" size="small" @click="handleWithdraw">我要提现</a-button>
      </div>
    </a-card>
  </a-spin>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import {useAppStore} from '@/stores'
import {Message, Modal} from '@arco-design/web-vue'
import {
  WithdrawalRequests,
  getNotSettledMoney as getData
} from "@/apis/settlement/earnings";

import {
  checkDodoStatus
} from "@/apis/system/todo";


const appStore = useAppStore()
const isDark = computed(() => appStore.theme === 'dark')

const count = ref(0)
const growth = ref(0)

const loading = ref(false)
// 查询图表数据
const getPayoutsData = async () => {
  try {
    loading.value = true
    // 后台获取统计数据
    const {data} = await getData()
    count.value = data.total
    growth.value = data.growth
  } finally {
    loading.value = false
  }
}

const handleWithdraw = async () => {
  //判断count是否大于0
  if (count.value <= 0) {
    Message.error('暂无可提现收益')
    return
  }
  // if (count.value <= 3000) {
  //   Message.error('3000元以下的提现收益无法提现')
  //   return
  // }
  await checkDodoStatus()
  Modal.confirm({
    title: '提示',
    content: '是否确认发起提现申请？',
    hideCancel: false,
    okButtonProps: {status: 'danger'},
    onOk: async () => {
      // 这里写发起提现的逻辑
      // console.log('用户确认提现')
      await WithdrawalRequests()
      Message.success('已发送申请，等待财务处理')
      // search()
      // mittBus.emit('file-total-refresh')
    },
  })
}

onMounted(() => {
  getPayoutsData()
})
</script>

<style scoped lang="less">
:deep(.arco-card) {
  border-radius: 4px;
}

:deep(.arco-card-body) {
  width: 100%;
  height: 134px;
  padding: 0;
}

.content-wrap {
  width: 100%;
  padding: 16px;
  white-space: nowrap;
}

:deep(.content) {
  float: left;
  width: 300px;
  height: 102px;
}

:deep(.arco-statistic) {
  .arco-statistic-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
  }

  .arco-statistic-content {
    margin-top: 10px;
  }
}

.label {
  padding-right: 8px;
  font-size: 12px;
}
</style>
